<template>
  <view class="navigation-bar-container" :style="{width: '100%', height: statusbarHeight + bar_topHeight + 'px'}">
    <!-- 状态栏 -->
    <view class="status-bar" :style="{'background-color': statusBgColor, height: statusbarHeight + 'px'}"></view>
    <!-- 导航栏 -->
    <view class="bar-main-contain"
      :style="{position: 'fixed',top: statusbarHeight + 'px',width: '100%',height: bar_topHeight + 'px', 'background-color': navigationBgColor, 'line-height': bar_topHeight + 'px'}">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  export default {
    name: "navigation-bar",
    props: {
      statusBgColor: {
        type: String,
        default: '#FFF'
      },
      navigationBgColor: {
        type: String,
        default: '#FFF'
      }
    },
    computed: {
      ...mapState("m_app", ["statusbarHeight", "bar_topHeight"])
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .navigation-bar-container {

    .status-bar {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #FFF;
      z-index: 99999;
    }

    .bar-main-contain {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #FFF;
      font-weight: 400;
      font-size: 15px;
      z-index: 9999;
    }
  }
</style>